06. Anonymous Boxes

In the last quiz, you encountered an anonymous box.

If this style is applied:

.child {
  display: inline-block;
  width: 50%;
}

then this:

<div class="container">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
</div>

is rendered differently than this:

<div class="container">
  <div class="child">Child 1</div><div class="child">Child 2</div>
</div>

because the whitespace, the newline and the tab, between the .child elements is turned into an anonymous box.

Anonymous boxes arise in situations where there is a mix of block and inline elements inside a container. In the example above, the whitespace is turned into an inline element between the two .childs.

The good news is that you won’t need to think about anonymous boxes for 99.9% of the HTML you write, but it’s worth knowing about them when something weird like this happens.

Check out the official spec on anonymous boxes and this great explanation for more information.